<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8' />
  <title>Measure distances</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script include="jquery" src="./static/libs/include-lib-local.js"></script>
  <script include="geohash,geojson,turf" src="./static/libs/include-openlayers-local.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id='map'></div>
  <script>
    var map = new ol.Map({
      //地图容器div的ID
      target: 'map',
      //地图容器中加载的图层
      layers: [],
      //地图视图设置
      view: new ol.View({
        //地图初始中心点
        center: ol.proj.fromLonLat([116.35, 39.9]),
        //地图初始显示级别
        zoom: 9,
        //最小级别
        minZoom: 1,
        //最大级别
        maxZoom: 20
      })
    });
    var geojson, points;
    
    initMap();
    loadData();

    function initMap() {
      map.addLayer(new ol.layer.Tile({
        source: new ol.source.TileImage({
          url: 'https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token=' +
            'sk.eyJ1IjoiY2hlbmdkYWRhIiwiYSI6ImNqZDFjaGo0ZjFzcnoyeG54enoxdnNuZHUifQ.hTWXXBUQ0wdGeuDF3GWeUw'
        })
      }))
    }

    function loadData() {
      $.getJSON('./static/data/client-analysis/buffer-hash-4.json', function (data) {
        convertDataToGeoJson(data);
        updateView(geojson);
      });
    }

    function convertDataToGeoJson(origindata) {
      var columnarPoints = [];
      origindata.aggregations.geohash.buckets.forEach(function (bucket) {
        var coordinates = decodeGeoHash(bucket.key);
        var countNumber = bucket.doc_count;
        var point = {
          pointKey: [
            coordinates.longitude[2], coordinates.latitude[2]
          ],
          count: bucket.doc_count
        }; //[0] min [1]max [2] 中心点
        columnarPoints.push(point);
      });
      points = GeoJSON.parse(columnarPoints, {
        'Point': 'pointKey'
      });
      geojson = turf.centroid(points);
    }

    function updateView(origindata) {
      var source = new ol.source.Vector();
      var originsource = new ol.source.Vector();

      let oljson = new ol.format.GeoJSON();

      let feature = oljson.readFeature(geojson);
      feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
      source.addFeature(feature);

      map.addLayer(new ol.layer.Vector({
        source: source,
        style: function () {
          return new ol.style.Style({
            image: new ol.style.Circle({
              radius: 15,
              fill: new ol.style.Fill({
                color: 'rgba(255, 0, 0, 0.1)'
              }),
              stroke: new ol.style.Stroke({
                color: 'red',
                width: 1
              })
            })
          })
        }
      }))

      points.features.forEach(function (point) {
        feature = new ol.format.GeoJSON().readFeature(point);
        feature.getGeometry().transform('EPSG:4326', 'EPSG:3857');
        originsource.addFeature(feature);
      })

      map.addLayer(new ol.layer.Vector({
        source: originsource,
        style: function () {
          return new ol.style.Style({
            image: new ol.style.Circle({
              radius: 5,
              fill: new ol.style.Fill({
                color: 'rgba(0, 0, 255, 0.1)'
              }),
              stroke: new ol.style.Stroke({
                color: 'blue',
                width: 1
              })
            })
          })
        }
      }))


    }
  </script>

</body>

</html>